<template> 
    <image
      class="ImgAuto"
      :style="{ height: imgHeight+'px', width:width+'px'}"
      :src="imgSrc"
      @load="onImageLoad"
      resize="cover"
    ></image> 
</template>
<script>
export default {
  props: {
    imgSrc: {
      default: ""
    },
    width: {
      default: 200
    }
  },
  data() {
    return {
      imgHeight: 200
    };
  },
  methods: {
    onImageLoad(data) {
      
      if (data.success) {
        let imgWidth=data.size.naturalWidth;
        let height=data.size.naturalHeight;
        this.imgHeight=this.width*(height/imgWidth)
      }
    }
  }
};
</script>
<style  >
.ImgAuto{
  display: block
}
</style>
 